<template>
  <div class="flex a-c">
    <span
      v-if="props.label"
      :style="{ width: props.labelWidth ? props.labelWidth : 'auto' }"
      class="select-lable"
      >{{ props.label }}：</span
    >
    <el-select
      v-model="results"
      :style="`width:${props.width}`"
      :size="props.size"
      placeholder="请选择"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
  </div>
</template>

<script lang="ts" setup>
interface optionsType {
  value: number | string;
  label: string | number;
}

const props = withDefaults(
  defineProps<{
    width?: string;
    modelValue: string | number;
    options?: optionsType[];
    label: string;
    size?: string;
    labelWidth?: string;
  }>(),
  {
    size: "small",
    label: "",
    value: "",
    labelWidth: "",
    width: "",
    options: () => [],
  }
);

const results = ref<string | number>("");
const emit = defineEmits(["update:modelValue"]);
results.value = props.modelValue;
watch(
  () => props.modelValue,
  async () => {
    results.value = props.modelValue;
  }
);
watch(results, async () => {
  emit("update:modelValue", results);
});
</script>

<style lang="scss" scoped>
.select-lable {
  display: inline-block;
  text-align: right;
  width: 45px;
}
</style>